<template>
  <div class="protection-intro">
    <div class="protection-intro-content">
      <div class="protection-intro-content-title">
        <img
          src="../assets/governance.svg"
          alt=""
          class="protection-intro-content-pic"
        />
        <div>Enjoy governance mining!</div>
      </div>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi,
      cupiditate voluptatibus impedit nemo, illum pariatur at repudiandae
      officiis molestiae a dolorum dolorem quia reiciendis explicabo
      reprehenderit, perspiciatis. totam voluptatum velit. Lorem ipsum dolor,
      sit amet consectetur adipisicing elit. Deserunt veniam laborum vero.
      Voluptatum, asperiores est. Accusamus vitae assumenda, consectetur,
      praesentium rem quibusdam amet cupiditate doloremque harum ipsam
    </div>
  </div>

  <div class="protection-args-wrapper policies-for-cancel">
    <ul>
      <li>
        <div class="protection-li protection-args">
          <div>Protected Protocol</div>
          <div>Policy ID</div>
          <div>Coverage</div>
          <div>Deposit</div>
          <div>Effective Until</div>
          <div>Settle</div>
        </div>
      </li>
    </ul>

    <Spin
      :spinning="governanceListLoading"
      wrapperClassName="governance-container"
    >
      <ul>
        <li
          v-for="(item, index) in allEffectivePolicyArr.slice(
            policyPageStart,
            policyInPageEnd
          )"
          :key="index"
        >
          <div class="protection-li protection-ins">
            <div>{{ getPoolName(item.protocol) }}</div>
            <div>{{ item.policyId }}</div>
            <div>{{ item.coverage / 10 ** 18 }}USD</div>
            <div>10USD</div>
            <div>2023-11-1</div>
            <div @click="doSettle(item, index)"><button>settle</button></div>
          </div>
        </li>
      </ul>
    </Spin>
  </div>
  <div class="page-turner page-turner-gov" v-show="!governanceListLoading">
    <Pagination
      v-model:current="current"
      :total="allEffectivePolicyArr.length"
      :pageSize="pageSize"
      @change="onPaginationChange"
      :showSizeChanger="false"
    >
      <template #itemRender="{ type, originalElement }">
        <div class="pagination-container" v-if="type === 'prev'">
          <div class="pagination-text">
            {{ pageSize * (current - 1) + 1 }} - {{ pageSize * current }} of
            {{ allEffectivePolicyArr.length }} items
          </div>
          <img @click="pageDownGov()" src="@/assets/left-icon.svg" alt="" />
        </div>
        <div class="pagination-container" v-else-if="type === 'next'">
          <img @click="pageUpGov()" src="@/assets/right-icon.svg" alt="" />
        </div>
        <component :is="originalElement" v-else></component>
      </template>
    </Pagination>
  </div>
</template>

<script>
import axios from "axios";
import store from "../vuex/store";
import { Pagination, Spin } from "ant-design-vue";

export default {
  name: "governancePage",
  components: { Pagination, Spin },
  data() {
    return {
      governanceListLoading: true,
      allEffectivePolicyArr: [],
      policyPageStart: 0,
      policyInPageEnd: 6,
      current: 1,
      pageSize: 6,
    };
  },
  methods: {
    onPaginationChange(current, size) {
      this.current = current;
      this.pageSize = size;
      this.policyPageStart = (current - 1) * size;
      this.policyInPageEnd = current * size;
    },
    pageUpGov() {
      if (
        this.policyPageStart + this.pageSize >=
        this.allEffectivePolicyArr.length
      ) {
        return;
      } else {
        this.policyPageStart += this.pageSize;
        this.policyInPageEnd += this.pageSize;
      }
    },
    pageDownGov() {
      if (this.policyInPageEnd - this.pageSize <= 0) {
        return;
      } else {
        this.policyPageStart -= this.pageSize;
        this.policyInPageEnd -= this.pageSize;
      }
    },
    async doSettle(item, index) {
      var currentAddress;
      currentAddress = store.state.web3Utils.currentAddressComp;
      if (currentAddress == "") {
        store.dispatch("linkWallet");
      } else {
        let poolAddress = item.protocol;
        let policyId = item.policyId;
        await store.dispatch("settlePolicy", { poolAddress, policyId }).then(
          (result) => {
            if (result == "Settling policy failed") {
              console.log(result);
            } else {
              this.allEffectivePolicyArr.splice(index, 1);
            }
          },
          (err) => {
            console.log(err);
          }
        );
      }
    },
    getPoolName(poolAddress) {
      return store.state.web3Data.poolAddressArr[poolAddress]?.Protected;
    },
  },

  mounted() {
    axios.defaults.baseURL =
      "https://api.thegraph.com/subgraphs/name/lutianzhou001/md-mumbai";
    axios({
      method: "post",
      url: "",
      data: {
        query: `query MyQuery {
                  policies(where: {isSettled: false}) {
                    SPS
                    coverage
                    duration
                    enteredEpochIndex
                    fee
                    id
                    isClaimApplying
                    isClaimed
                    isSettled
                    standardRisk
                    policyId
                    beneficiary
                    protocol
                  }
                }`,
      },
    }).then(
      (response) => {
        // console.log(response.data.data.policies);
        // let policies = response.data.data.policies;
        // let policiesLen = policies.length;
        // for (var i = 0; i < policiesLen; i++) {
        //   let poolAddress = policies[i].protocol;
        //   policies[i]['poolName'] = store.state.web3Data.poolAddressArr[poolAddress];
        // }
        // this.allEffectivePolicyArr = policies;
        this.governanceListLoading = false;
        this.allEffectivePolicyArr = response.data.data.policies;
      },
      (error) => {
        this.governanceListLoading = false;
        console.log(error);
      }
    );
  },
};
</script>

<style lang='less' scoped>
.governance-container {
  min-height: 175px;
}
.protection-ins button {
  cursor: pointer;
  border: none;
  height: 40px;
  border-radius: 5px;
  font-weight: 700;
  color: #eff1f6;
  background-color: #1d263b;
}

.page {
  position: relative;
  height: 30px;
  width: 30px;
  border-radius: 15px;
  background-color: #1649ff;
}

.page > div {
  position: absolute;
  width: 12px;
  height: 2px;
  background-color: #eff1f6;
  left: 7.5px;
}

.page-right > div {
  left: 9.5px;
}

.page > .page-line-1 {
  top: 10px;
}

.page > .page-line-2 {
  top: 17px;
}

.page-left > .page-line-1 {
  transform: rotateZ(-41deg);
}

.page-left > .page-line-2 {
  transform: rotateZ(41deg);
}

.page-right > .page-line-1 {
  transform: rotateZ(41deg);
}

.page-right > .page-line-2 {
  transform: rotateZ(-41deg);
}

.page-left {
  margin-right: 10px;
}

.page-right {
  margin-left: 10px;
}

@media (min-width: 915px) {
  .policies-for-cancel {
    margin-bottom: 30px;
  }

  .page-turner-gov {
    padding-bottom: 20px;
  }
}
</style>